import React, {useEffect, useState} from 'react';
import {Button, Card, Col, Input, Row, Space} from 'antd';
import {ProList} from "@ant-design/pro-components";
import {getInterfaceInfoUsingPost} from "@/services/easyapi/eApiManage";
import {SearchOutlined} from "@ant-design/icons";
import {request} from "@umijs/max";
import { useLocation } from 'react-router-dom';

const ApiInvoke: React.FC = () => {
  const location = useLocation();
  //@ts-ignore
  const { interfaceId } = location.state || {};
  const [apiInfo, setApiInfo] = useState<API.ApiInfoVo>()
  const [inputParams, setInputParams] = useState<API.InputParam[]>()
  const [res, setRes] = useState<string>('')
  const [id, setId] = useState<number>(0)
  useEffect(() => {
   if (interfaceId!==undefined && interfaceId!==null){
     fetchInterfaceInfo(interfaceId)
   }
  }, [interfaceId])

  const handleInterfaceInvoke = async () => {
    const res = await request<string>(apiInfo?.apiPath, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {}
    })
    setRes(res);
  }

  const fetchInterfaceInfo = async (id:number) => {
    const res = await getInterfaceInfoUsingPost({
      id: id
    });
    if (res.code === 200) {
      setApiInfo(res.data)
      setInputParams(res.data.inputParams)
    }
  }
  return (
    <Row gutter={24}>
      {/* 左边部分 */}
      <Col span={12}>
        <Card title="API 测试">
          <p>api名称：</p>
          <p>api类型：</p>

        </Card>
        <ProList<API.InputParam>
          dataSource={inputParams}
          metas={{
            title: {
              dataIndex: 'apiName',
              render: (text) => {
                return (
                  <p>{"输入参数"}</p>
                )
              }
            },
            description: {
              render: (text, record) => {
                return (
                  <Card
                    bordered={false}
                    style={{
                      padding: '0px',
                      backgroundColor: 'rgba(255, 255, 255, 0.5)', // 半透明背景
                      borderRadius: '0px',
                      backdropFilter: 'blur(10px)', // 毛玻璃效果
                      WebkitBackdropFilter: 'blur(10px)', // 兼容 Safari
                      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)', // 阴影效果
                    }}
                    bodyStyle={{padding: '1px'}}
                  >
                    <Space
                      style={{width: '100%', justifyContent: 'space-between'}}
                      size="small"
                      direction="horizontal"
                    >
                      <div>
                        <p style={{margin: 0}}>
                          <strong>类型:</strong> {record.fieldType}</p>
                      </div>
                      <div>
                        <p style={{margin: 0}}><strong>参数名称:</strong> {record.paramName}</p>
                      </div>
                      <div>
                        <p style={{margin: 0}}>
                          <strong>必填?:</strong> {record.required === 1 ? '是' : '否'}</p>
                      </div>
                      <div>
                        <p style={{margin: 0}}><strong>操作:</strong> {record.operator}</p>
                      </div>
                      <Space.Compact>
                        <Input addonBefore={"参数值"} style={{margin: 0}} defaultValue="26888888"/>
                      </Space.Compact>
                    </Space>
                  </Card>
                );
              },
            },
          }}
        />
        <Card>
          <Space>
            <a>https:com.easyapi{apiInfo?.apiPath}</a>
            <Button shape="circle" icon={<SearchOutlined/>} onClick={handleInterfaceInvoke}></Button>
          </Space>

        </Card>
      </Col>
      {/* 右边部分 */}
      {/* 右边部分 */}
      <Col span={12}>
        <Card title="返回数据" style={{height: '100%', backgroundColor: '#000000'}}>
          <div>
            {/* Displaying the response as JSON */}
            <h3>返回数据 (JSON):</h3>
            <pre style={{backgroundColor: '#000000', padding: '10px', borderRadius: '5px'}}>
              {JSON.stringify(res, null, 2)}
            </pre>
          </div>
        </Card>
      </Col>
    </Row>
  );
};

export default ApiInvoke;
